<template>
    <section>
      <!-- 走马灯 -->
      <el-carousel :interval="introCard.interval" :type="introCard.type" :height="introCard.height" class="intro-card x-full"
        @change="cardChanged"
      >
        <el-carousel-item v-for="(item, index) in 6" :key="index">
          <h3 :class="['card-item', introCard.currentIndex === index ? 'card-active' : '']">{{ item }}</h3>
        </el-carousel-item>
      </el-carousel>
      <!-- 广告牌 -->
      <div v-for="(bar, index) in introBarList" class="intro-bar x-1024" :key="index">
        <LandScapeBar v-if="bar.type === 1" :key="index" :info="bar"></LandScapeBar>
        <PortraitBar v-else-if="bar.type === 2" :key="index" :info="bar"></PortraitBar>
        <SplitLandScapeBar v-else-if="bar.type === 3" :key="index" :info="bar"></SplitLandScapeBar>
        <SplitPortraitBar v-else :key="index" :info="bar"></SplitPortraitBar>
      </div>
    </section>
</template>

<script>
import LandScapeBar from './IntroBars/LandScapeBar'
import PortraitBar from './IntroBars/PortraitBar'
import SplitLandScapeBar from './IntroBars/SplitLandScapeBar'
import SplitPortraitBar from './IntroBars/SplitPortraitBar'
export default {
  name: 'IntroBar',
  components: {LandScapeBar, PortraitBar, SplitLandScapeBar, SplitPortraitBar},
  data () {
    return {
      // 走马灯
      introCard: {
        height: '400px',
        type: 'card',
        interval: 3000,
        currentIndex: 0
      },
      // 广告数据
      introBarList: [
        {
          type: 1,
          title: '横屏广告',
          subTitle: '这是一个横屏广告',
          pic: '',
          link: ''
        },
        {
          type: 2,
          title: '竖屏广告',
          subTitle: '这是一个竖屏广告',
          pic: '',
          link: ''
        },
        {
          type: 3,
          items: [
            {
              title: '分屏横屏广告1',
              subTitle: '这个是分屏横屏广告1',
              pic: 'http://146.56.212.102:1212/file/images/default-img-a.png',
              link: ''
            },
            {
              title: '分屏横屏广告2',
              subTitle: '这个是分屏横屏广告2',
              pic: '',
              link: ''
            }
          ]
        },
        {
          type: 4,
          items: [
            {
              title: '分屏竖屏广告1',
              subTitle: '这个是分屏竖屏广告1',
              pic: '',
              link: ''
            },
            {
              title: '分屏竖屏广告2',
              subTitle: '这个是分屏竖屏广告2',
              pic: '',
              link: ''
            },
            {
              title: '分屏竖屏广告3',
              subTitle: '这个是分屏竖屏广告3',
              pic: '',
              link: ''
            }
          ]
        }
      ]
    }
  },
  methods: {
    cardChanged (nowIndex, beforeIndex) {
      this.introCard.currentIndex = nowIndex
    }
  }
}
</script>

<style lang="less" scoped>
.intro-bar {
  margin: 0 auto;
}
.intro-card {
  .card-item {
    font-size: 60px;
    opacity: 1;
    line-height: 400px;
    text-align: center;
    margin: 0;
  }
}
</style>
